<template>
  <view class="ranking-page">
    <view class="header">
      <text class="title">排行榜</text>
      <button class="close-btn" @click="navigateBack">
        <text class="icon">×</text>
      </button>
    </view>
    
    <view class="top-players">
      <view class="player second">
        <text class="rank">2</text>
        <view class="avatar silver">🥈</view>
        <text class="name">{{ secondPlace.username || '暂无' }}</text>
        <text class="score">{{ secondPlace.score || '0' }}</text>
      </view>
      
      <view class="player first">
        <text class="rank">1</text>
        <view class="avatar gold">🏆</view>
        <text class="name">{{ firstPlace.username || '暂无' }}</text>
        <text class="score">{{ firstPlace.score || '0' }}</text>
      </view>
      
      <view class="player third">
        <text class="rank">3</text>
        <view class="avatar bronze">🥉</view>
        <text class="name">{{ thirdPlace.username || '暂无' }}</text>
        <text class="score">{{ thirdPlace.score || '0' }}</text>
      </view>
    </view>
    
    <view class="other-players">
      <ranking-item 
        v-for="(user, index) in otherPlayers" 
        :key="index"
        :rank="index + 4"
        :user="user"
      ></ranking-item>
    </view>
    
    <view class="current-user" v-if="userStore.isLoggedIn">
      <text class="title">我的排名</text>
      <ranking-item 
        :rank="userStore.userRank || '--'"
        :user="{
          username: userStore.userInfo.username,
          score: gameStore.totalScore
        }"
      ></ranking-item>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { useGameStore } from '@/store/game'
import RankingItem from '@/components/ranking-item.vue'

const userStore = useUserStore()
const gameStore = useGameStore()

onMounted(() => {
  userStore.initUserState()
  gameStore.initGameState()
})

const firstPlace = computed(() => userStore.rankings[0] || {})
const secondPlace = computed(() => userStore.rankings[1] || {})
const thirdPlace = computed(() => userStore.rankings[2] || {})
const otherPlayers = computed(() => userStore.rankings.slice(3, 10)) // 显示4-10名

const navigateBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.ranking-page {
  background-color: #1a1a2e;
  min-height: 100vh;
  padding: 24rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.close-btn {
  background-color: transparent;
  color: #ccc;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.top-players {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16rpx;
  margin-bottom: 48rpx;
  padding: 24rpx 0;
}

.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
}

.player.first {
  order: 2;
  margin-bottom: 32rpx;
}

.player.second {
  order: 1;
}

.player.third {
  order: 3;
}

.rank {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.player.first .rank {
  color: #FFD700;
}

.player.second .rank {
  color: #C0C0C0;
}

.player.third .rank {
  color: #CD7F32;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  margin-bottom: 8rpx;
}

.avatar.gold {
  background: linear-gradient(to bottom, #FFD700, #FFA500);
}

.avatar.silver {
  background: linear-gradient(to bottom, #C0C0C0, #A9A9A9);
}

.avatar.bronze {
  background: linear-gradient(to bottom, #CD7F32, #D2691E);
}

.name {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 4rpx;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score {
  font-size: 24rpx;
  font-weight: bold;
}

.player.first .score {
  color: #FFD700;
}

.player.second .score {
  color: #C0C0C0;
}

.player.third .score {
  color: #CD7F32;
}

.other-players {
  margin-bottom: 32rpx;
}

.current-user {
  margin-top: 32rpx;
  padding-top: 32rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.current-user .title {
  margin-bottom: 16rpx;
  display: block;
}
</style>